@extends('layouts.app')

@section('title')
    后台-搭配管理
@stop

@section('extcss')
    <!--ext css-->
    <!-- Custom styling plus -->
    <style>
        .cartlabel {
            height: 30px;
            line-height: 3;
        }

        .item.bad .alert {
            left: 40%;
            color: black;
            margin-top: 10px;;
        }

    </style>
    <!-- Custom styling plus -->
    <!-- /ext css-->
@stop

@section('content')
    <style>
        ul.widget_tally li {
            padding: 0px;
            border-bottom: none;
            padding-bottom: 4px;
        }

        .list-inline {
            padding-left: 0;
            margin-left: 0px;
            list-style: none;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 0px;
        }

        .btn-group .btn {
            margin-right: 10px;
        }

        .btn.active, .btn:active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            box-shadow: 0px 0px 5px #1ABB9C;
        }
    </style>
    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>服装搭配</h3>
                </div>

                <div class="title_right">
                    &nbsp;
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-9 col-xs-12 col-sm-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>服装搭配 总计 【{{count($goods)}}】 款</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">

                            <div id="divItems">
                            @forelse($goods as $good)
                                <!--item-->
                                    <div id="item_{{$good->serial}}" class="row">
                                        <div class="col-md-2">
                                            <img id="item_{{$good->serial}}_img" class="img-responsive img-thumbnail"
                                                 src="{{asset("upload/images/".($good->picurl ==null ? "default.png":$good->picurl))}}"
                                                 style="width:180px;height:180px;">
                                            <input type="hidden" id="item_{{$good->id}}_serial"
                                                   value="{{$good->serial}}">
                                        </div>
                                        <div class="col-md-10">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <ul class="list-inline widget_tally text-left">
                                                        <li>款号：
                                                            <label class="cartlabel control-label">{{$good->serial}}</label>
                                                        </li>
                                                        <li>分类：
                                                            <label class="cartlabel control-label">{{$good->category->key}}</label>
                                                        </li>
                                                        <li>风格：
                                                            <label class="cartlabel control-label">{{$good->style->key}}</label>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-md-10">
                                                    <div class="row">尺码：
                                                        <div class="btn-group" data-toggle="buttons">
                                                            @foreach($good->where('serial',$good->serial)->groupBy('Size')->orderBy('id', 'desc')->get() as $item)
                                                                <label class="btn btn-default"
                                                                       style="background-color: transparent;border-color: #ECECEC;color:#73879C;">
                                                                    <input type="radio" name="groupsize"
                                                                           data-serial="{{$good->serial}}" data-id="{{$item->id}}" data-key="{{$item->size->key}}"
                                                                           value="{{$item->size->val}}"/> {{$item->size->key}}
                                                                </label>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                    <div class="row">&nbsp;</div>
                                                    <div class="row">颜色：
                                                        <div class="btn-group" data-toggle="buttons">
                                                            @foreach($good->where('serial',$good->serial)->groupBy('Color')->orderBy('color', 'desc')->get() as $item)
                                                                <label class="btn btn-default"
                                                                       style="font-size:10px;background-color: {{$item->color->val}};border-color: #ECECEC;color:#73879C;width:60px;">
                                                                    <input type="checkbox" name="groupcolor"
                                                                           data-serial="{{$good->serial}}" data-key="{{$item->color->key}}"
                                                                           value="{{$item->color->val}}"> {{$item->color->key}}
                                                                </label>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <ul class="list-inline widget_tally">
                                                        <li>备注：
                                                            <label class="cartlabel control-label">{{$good->remark}}</label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr style="width:100%;"/>
                                    <!-- /item-->
                                @empty
                                    <h5>无物品记录</h5>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12 rightScroll">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>搭配盒子</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <!--Cart-->
                            <div id="itemCardList" class="list-group">

                            </div>
                            <!-- /Cart-->
                            <div class="ln_solid"></div>
                            <form id="assortForm" method="post" action="{{url('system/assort/check')}}"
                                  class="form-horizontal form-label-left" novalidate>
                                {!!csrf_field()!!}
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">客户姓名 <span
                                                class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-12 col-xs-12">
                                        <input type="text" id="name" name="name" class="form-control col-md-7 col-xs-12"
                                               placeholder="测试先生" required="required">
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="wechat">客户微信 <span
                                                class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-12 col-xs-12">
                                        <input type="text" id="wechat" name="wechat"
                                               class="form-control col-md-7 col-xs-12"
                                               placeholder="测试微信号" required="required">
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mobile">客户电话 <span
                                                class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-12 col-xs-12">
                                        <input type="tel" id="mobile" name="mobile"
                                               class="form-control col-md-7 col-xs-12" data-parsley-length="[8, 20]"
                                               value="{{old("mobile")}}" required="required">
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="selProvince">客户地址
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <select id="selProvince" name="selProvince" class="form-control"
                                                    required="required">
                                                <option value="">--请选择省份--</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <select id="selCity" name="selCity" class="form-control"
                                                    required="required">
                                                <option value="">--请选择城市--</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <select id="selDistrict" name="selDistrict" class="form-control"
                                                    required="required">
                                                <option value="">--请选择区/县--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
                                        <textarea id="address" name="address" class="form-control col-md-7 col-xs-12"
                                                  required="required"></textarea>
                                    </div>
                                </div>
                                <div class="ln_solid"></div>
                                <div class="form-group">
                                    <div class="col-md-6 text-center">
                                        <button id="send" type="submit" class="btn btn-success">提交</button>
                                    </div>
                                    <div class="col-md-6 text-center">
                                        <button type="button" class="btn btn-default">取消</button>
                                    </div>
                                </div>
                            </form>

                            <div class="clearfix"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
@stop

@section('extjs')
    <!--ext js-->
    <!--store.js-->
    <script src="//cdn.bootcss.com/store.js/1.3.20/store.min.js"></script>
    <!--json2.js-->
    <script src="//cdn.bootcss.com/json2/20150503/json2.min.js"></script>
    <!-- Switchery -->
    <script src="{{asset("vendors/switchery/dist/switchery.min.js")}}"></script>
    <!-- Parsley -->
    <script src="{{asset("vendors/parsleyjs/dist/parsley.min.js")}}"></script>
    <script src="{{asset("vendors/parsleyjs/dist/i18n/zh_cn.js")}}"></script>

    <!--Province Select-->
    <script src="{{asset("vendors/build/js/china_area.min.js")}}"></script>

    <!--Parsley-->
    <script type="text/javascript">
        $(function () {
            $('#assortForm').parsley().on('field:validated', function () {
                var ok = $('.parsley-error').length === 0;
                $('.bs-callout-info').toggleClass('hidden', !ok);
                $('.bs-callout-warning').toggleClass('hidden', ok);
            }).on('form:submit', function () {
                //store.set('goodsItem', { name: 'marcus', likes: 'javascript' })
                //提交前看是否有选择相应的物品。
                var goodsItem = [];
                var _name = "", _wechat = "", _mobile = "", _address;

                $("#itemCardList a button").each(function (index, item) {
                    var json = $(item).data('items');
                    goodsItem.push(json);
                });

                //客户姓名
                _name = $("#name").val().replace(/[\n\r\s]/gi, "");

                //客户微信
                _wechat = $("#wechat").val().replace(/[\n\r\s]/gi, "");
                ;

                //客户电话
                _mobile = $("#mobile").val().replace(/[\n\r\s]/gi, "");
                ;

                //客户地址去除空格和回车换行
                _tempaddress = $("#address").val().replace(/[\n\r\s]/gi, "");
                _tempaddress = _tempaddress.replace(/[ ]/g, "");

                //客户地址
                _address = $("#selProvince option:checked").text() + $("#selCity option:checked").text() + $("#selDistrict option:checked").text() + _tempaddress;

                var a = $('<input />', {
                    type: "hidden",
                    name: "assortJson",
                    value: "{\"name\":\"" + _name + "\",\"wechat\":\"" + _wechat + "\",\"mobile\":\"" + _mobile + "\",\"address\":\"" + _address + "\",\"goodsitem\":" + JSON.stringify(goodsItem) + "}",
                }).appendTo($('#assortForm'));

                $(this).submit();
            });
        });
    </script>
    <!-- /Parsley-->

    <!--Province Select-->
    <script>
        $(function () {
            $.each(provinceJson, function (k, p) {
                var option = "<option value='" + p.id + "'>" + p.province + "</option>";
                $("#selProvince").append(option);
            });
            $("#selProvince").change(function () {
                var selValue = $(this).val();
                $("#selCity option:gt(0)").remove();
                $.each(cityJson, function (k, p) {
                    // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
                    if (p.id == selValue || p.parent == selValue) {
                        var option = "<option value='" + p.id + "'>" + p.city + "</option>";
                        $("#selCity").append(option);
                    }
                });
            });
            $("#selCity").change(function () {
                var selValue = $(this).val();
                $("#selDistrict option:gt(0)").remove();
                $.each(countyJson, function (k, p) {
                    if (p.parent == selValue) {
                        var option = "<option value='" + p.id + "'>" + p.county + "</option>";
                        $("#selDistrict").append(option);
                    }
                });
            });
        });
    </script>
    <!-- /Province Select-->

    <!-- Custom Item Card -->
    <script>
        $(document).ready(function () {
            store.forEach(function (k, v) {
                bindCart(v.itemId, v.itemSize, v.itemColor, v.itemCategory, v.itemNumber, v.itemSerial);
                if(!$("input[data-serial='"+v.itemSerial+"'][data-key='"+v.itemColor+"']").parent().hasClass('active'))
                    $("input[data-serial='"+v.itemSerial+"'][data-key='"+v.itemColor+"']").parent().addClass('active');

                if(!$("input[data-serial='"+v.itemSerial+"'][data-key='"+v.itemSize+"']").parent().hasClass('active'))
                    $("input[data-serial='"+v.itemSerial+"'][data-key='"+v.itemSize+"']").parent().addClass('active');
            });
        });
    </script>

    <script>
        function bindCart(itemId, itemSize, itemColor, itemCategory, itemNumber, itemSerial) {
            //增加行号项
            var rowItemIndex = $("#itemCardList a").size() + 1;
            //为防止用户重复提交这里先禁用按钮

            //这里获取参数绑定到下面的表达式中
            var a = $('<a />', {
                id: itemId + "_anchor",
                class: 'list-group-item alert fade in',
                name:'item_'+itemSerial+"_anchor",
                href: "#item_" + itemSerial,
                text: "【" + rowItemIndex + "】" + " " + itemSize + " " + itemColor + " " + itemCategory + " " + itemNumber,
            }).appendTo($('#itemCardList'));
            var button = $('<button />', {
                id: itemId + "_close",
                type: "button",
                class: "close",
                "aria-label": "Close",
                "data-dismiss": "alert",
                "data-item-id": itemId,
                "data-item-serial":itemSerial,
                "data-items": "{\"goodsid\":" + "\"" + itemId + "\""
                + ",\"color\":" + "\"" + itemColor + "\""
                + ",\"size\":" + "\"" + itemSize + "\""
                + ",\"category\":" + "\"" + itemCategory + "\""
                + ",\"img\":" + "\"" + $("#item_" + itemSerial + "_img").attr("src") + "\""
                + ",\"number\":" + "\"" + itemNumber + "\""
                + ",\"serial\":" + "\"" + itemSerial + "\"}",
                title: "删除",
                html: "<i class=\"fa fa-close\"></i>",
                click: function () {
                    var serial= $(this).attr('data-item-serial');
                    $("#item_"+serial+" label").removeClass('active');
                    //那就是要删除这个存储的store数据
                    store.remove(itemId);
                },
            }).appendTo(a);
            //页面存储
            if (!store.get(itemId)) {
                store.set(itemId, {
                    itemId: itemId,
                    itemSize: itemSize,
                    itemColor: itemColor,
                    itemCategory: itemCategory,
                    itemNumber: itemNumber,
                    itemSerial: itemSerial
                });
            } else {
                var assortStore = store.get(itemId);
                assortStore.itemId = itemId;
                assortStore.itemSize = itemSize;
                assortStore.itemColor = itemColor;
                assortStore.itemCategory = itemCategory;
                assortStore.itemNumber = itemNumber;
                assortStore.itemSerial = itemSerial;
            }
        }
    </script>
    <!-- /Custom Item Card -->
    <!--scroll-->
    <script>
        $(function () {
            $(document).scroll(function () {
                var top = $(document).scrollTop();
                $(".rightScroll").css({top: top + "px"});
            });
        });
    </script>
    <!--/ scroll-->
    <!--Select size color ajax number-->
    <script>
        $(document).ready(function () {
            $(".btn.btn-default").click(function () {//所有的radio、checkbox全部绑定click事件
                var input = $(this).find('input');//查找实际绑定的值。

                if (input.attr("name") === "groupsize") {//当前是否选择项颜色
                    if (!input.parent().hasClass('active')){
                        $.each($('[type="checkbox"][data-serial="' + input.attr('data-serial') + '"]'), function (k, v) {
                            $(this).parent().removeClass('active');
                        });
                        //由于切换了大小所以要移除掉已经有的store的数据。item_444_anchor

                        if($("[name='item_"+input.attr('data-serial')+"_anchor']")){
                            $("[name='item_"+input.attr('data-serial')+"_anchor']").remove();
                            store.forEach(function(key, val) {
                                if(val.itemSerial===input.attr("data-serial")){
                                    store.remove(key);
                                }
                            });
                        }
                    }
                }

                if (input.attr("name") === "groupcolor") {//当前是否选择项颜色

                    if (!input.parent().hasClass('active')) {

                        var isselect = false;

                        $.each($('[type="radio"][data-serial="' + input.attr('data-serial') + '"]'), function (k, v) {//遍历同组选项，查找选定的尺码。
                            if ($(this).parent().hasClass("active")) {//如果尺码存在被选定的则ajax请求数据

                                isselect = true;

                                var datajson = {
                                    "serial": $(this).attr('data-serial'),
                                    "size": $(this).val(),
                                    "color": input.val()
                                };
                                $.ajax({
                                    url: "{{url('system/assort/ajaxnumber')}}"
                                    , async: true
                                    , data: datajson
                                    , type: "POST"
                                    , headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}
                                    , success: function (result) {
                                        //如果回来的json数据number》1那么就调用购物车的数据。
                                        //如果number《1那么就直接提示框即可。
                                        if(result.error!==undefined){
                                            alert("库存不足");
                                            input.parent().removeClass('active')
                                            return false;
                                        }else if(result.number<1){
                                            alert("库存不足");
                                            input.parent().removeClass('active')
                                            return false;
                                        }else{
                                            //bindCart("item_"+result.id, result.size, result.color, result.category, result.number, result.serial);
                                            bindCart("item_"+result.id, result.size, result.color, result.category, "1", result.serial);
                                        }

                                    }
                                });

                            }
                        });

                        if (!isselect) {
                            alert("请选择一个尺码！");
                        }
                    }else{
                        //撤销选定那么就要把已经选入购物车的数据给移除掉
                    }
                }
            });
        });
    </script>
    <!--/ Select size color ajax number-->
    <!-- /ext js-->
@stop